<template>
  <ECharts class="chart" :option="option" />
</template>

<script setup>
import ECharts from 'vue-echarts'
import { ref, computed, onMounted } from 'vue'
import { getEvidenceTyList } from '@/api/flaud/evidencetype'

const page = ref(0)
const total = ref(0)
const pageSize = ref(0)
const tableData = ref([])
const searchInfo = ref({})

onMounted(() => {
  getTableData()
})

const getTableData = async () => {
  const table = await getEvidenceTyList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
  if (table.code === 0) {
    tableData.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize

    countEvidenceType()
  }
  console.log(tableData.value)
}

const mydata1 = ref([])  
const mydata2 = ref([]) 

const countEvidenceType = () => {
  const countMap = {}
  const innerTypes = new Set(['法破案经过', '认罪认罚具结书', '户籍资料']) // 内层饼图类型

  tableData.value.forEach(item => {
    const type = item.evidenceType
    if (innerTypes.has(type)) {
      // 内层饼图数据统计
      countMap.inner = countMap.inner || {}
      countMap.inner[type] = (countMap.inner[type] || 0) + 1
    } else {
      // 外层饼图数据统计
      countMap.outer = countMap.outer || {}
      countMap.outer[type] = (countMap.outer[type] || 0) + 1
    }
  })

  mydata1.value = Object.entries(countMap.outer || {}).map(([name, value]) => ({
    name,
    value
  }))
  mydata2.value = Object.entries(countMap.inner || {}).map(([name, value]) => ({
    name,
    value
  }))
}

const option = computed(() => {

  const commonTooltip = {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  }
  const commonLegend = {
    data: mydata1.value.map((item) => item.name)
  }

  return {
    tooltip: commonTooltip,
    legend: commonLegend,
    series: [
      {
        name: '证据类型', 
        type: 'pie',
        selectedMode: 'single',
        radius: [0, '20%'],
        label: {
          position: 'inner',
          fontSize: 10
        },
        labelLine: {
          show: false
        },
        data: mydata2.value, 
      },
      {
        name: '证据类型',
        type: 'pie',
        radius: ['35%', '45%'],
        labelLine: {
          length: 30
        },
        label: {
          formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
          backgroundColor: '#F6F8FC',
          borderColor: '#8C8D8E',
          borderWidth: 1,
          borderRadius: 4,
          rich: {
            a: {
              color: '#6E7079',
              lineHeight: 22,
              align: 'center'
            },
            hr: {
              borderColor: '#8C8D8E',
              width: '100%',
              borderWidth: 1,
              height: 0
            },
            b: {
              color: '#4C5058',
              fontSize: 14,
              fontWeight: 'bold',
              lineHeight: 33
            },
            per: {
              color: '#fff',
              backgroundColor: '#4C5058',
              padding: [3, 4],
              borderRadius: 4
            }
          }
        },
        data: mydata1.value 
      }
    ]
  }
})
</script>

<style scoped>
.chart {
  width: 1000px;
  height: 500px;
}
</style>